<template>
    <div class="warning">
        <div class="title">项目预警</div>
        <div class="contain">
            <div class="con" v-for="(item) in Datas" :key="item.index">
                <div class="left">{{ item.name }}</div>
                <div class="right">
                    <p><img src="@/assets/images/18.png" alt="">{{ item.红 }}</p>
                    <p><img src="@/assets/images/19.png" alt="">{{ item.橙 }}</p>
                    <p><img src="@/assets/images/20.png" alt="">{{ item.黄 }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props:['resData'],
        data(){
            return{
                Datas:[],
            }
        },
        watch:{
            resData(res){
                let data = res.data.项目预警数据
                this.Datas = data.map((item, index) => {
                    return {...item, ...res.data.项目预警数据[index]};
                });
            }
        },
    }
</script>

<style lang="less" scoped>
.title {
    width: 1.0688rem;
    height: .4679rem;
    color: #fff;
    font-weight: bold;
    font-size: .2083rem;
    background: url('@/assets/images/16.png') no-repeat bottom right;
}

.contain {
    width: 100%;
    margin-top: .2083rem;

    .con {
        width: 100%;
        height: 0.4133rem;
        line-height: 0.4133rem;
        display: flex;
        font-size: .125rem;
        color: #fff;
        padding: .0883rem .1083rem;
        // background-color: #116482;
        .con:hover {
            background-color: #062b46;
        }

        .left {
            width: 20%;
        }

        .right {
            display: flex;
            margin-left: .3583rem;

            p {
                width: 0.7442rem;
                margin-right: .1583rem;

                img {
                    width: .2438rem;
                    height: .2438rem;
                    margin-right: .2383rem;
                    vertical-align: middle;
                }
            }
        }
    }
}
</style>
